<template>
    <div class="enroll f f-ac f-jc">
        <div class="enroll-body f f-ac f-ja">
            <div class="enroll-item" v-for="(i, k) in list" :key="k" :class="{ hover: i.hover }"
                :style="{backgroundImage:'url('+i.img+')'}" @mouseover="i.hover = true" @mouseleave="i.hover = false"
                @click="handleMenu(i)">
                <div class="enroll-item-title">{{ i.title }}</div>
                <div class="enroll-item-sub-title">{{ i.subTitle }}</div>
                <div class="enroll-item-enDesc">{{ i.desc }}</div>
                <pre class="enroll-item-desc">{{ i.enDesc }}</pre>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                list: [{
                        title: "品非遗",
                        subTitle: "西藏文化",
                        desc: "了解实时咨询就在",
                        enDesc: `རྒྱུས་
ལོན་
ཤེས་
རྟོགས་
དགོས་
ན་
བོད་
ཀྱི་
རིག་
གནས་
ཡོད།་`,
                        url: "/cultural",
                        hover: false,
                        img: require('@/assets/enroll1.png')
                    },
                    {
                        title: "享活动",
                        subTitle: "在线查看",
                        desc: "报名文化活动",
                        enDesc: `རིག་
གནས་
བྱེད་
སྒོར་
མིང་
ཐོ་
འགོད་
ན་
དྲ་
ཐོག་
ནས་
ལྟ་
ཆོག`,
                        url: "/activity",
                        hover: false,
                        img: require('@/assets/enroll2.png')
                    },
                    {
                        title: "学才艺",
                        subTitle: "在线报名",
                        desc: "报名文化才艺活动",
                        enDesc: `རིག་
གནས་
སྒྱུ་
རྩལ་
བྱེད་
སྒོར་
མིང་
ཐོ་
འགོད་
ན་དྲ་
ཐོག་
ནས་
མིང་
ཐོ་
འགོད་
ཆོག`,
                        url: "/skill",
                        hover: false,
                        img: require('@/assets/enroll3.png')
                    },
                    {
                        title: "赏精品",
                        subTitle: "在线查看",
                        desc: "历年历届精品文艺作品及直播回放",
                        enDesc: `ལོ་
ལྟར་
སྐབས་
རིམ་
བྱུང་
གི་རིག་
་བརྩམས་
ཆོས་
སྤུས་
དག་
དང་
དེ་
བཞིན་
ཐད་
གཏོང་
ཕྱིར་
སྟོན་།`,
                        url: "/wacth/index",
                        hover: false,
                        img: require('@/assets/enroll4.png')
                    },
                ],
            };
        },
        methods: {
            // 菜单点击事件
            handleMenu(item) {
                this.$router.push({
                    path: item.url,
                });
            },
        },
    };
</script>

<style lang="scss" scoped>
    .enroll {
        width: 100%;
        height: 563px;
        /* background-color: #fff; */

        .enroll-body {
            width: 1200px;
            height: 100%;

            .enroll-item {
                width: 169px;
                height: 483px;
                background-image: url("@/assets/enroll.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
                position: relative;
                color: #fff;

                &-title {
                    position: absolute;
                    top: 58px;
                    left: 30px;
                    right: 30px;
                    width: 110px;
                    height: 110px;
                    border-radius: 50%;
                    text-align: center;
                    line-height: 110px;
                    font-size: 24px;
                    font-weight: 700;
                }

                &-sub-title {
                    position: absolute;
                    right: 118px;
                    top: 205px;
                    font-size: 14px;
                    font-weight: 700;
                    line-height: 17px;
                    writing-mode: vertical-rl;
                    letter-spacing: 6px;
                }

                &-desc {
                    position: absolute;
                    right: 34px;
                    top: 168px;
                    bottom: 15px;
                    font-size: 14px;
                    font-weight: 700;
                    line-height: 15px;
                    /* writing-mode: vertical-lr; */

                    /* writing-mode: vertical-rl;
                    text-orientation: upright;
                    display: flex;
                    flex-direction: row; */


                    /* .vertical-text > * {
  display: block;
} */
                }

                &-enDesc {
                    position: absolute;
                    right: 97px;
                    top: 205px;
                    height: 230px;
                    font-size: 14px;
                    line-height: 17px;
                    writing-mode: vertical-lr;
                }
            }

            .hover {
                cursor: pointer;

                .enroll-item-title {
                    color: #193980;
                    background-color: #fff;
                }
            }
        }
    }
</style>